<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外卖后台管理系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/antd@5/dist/reset.css">
    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="css/components/store-monitor.css">
    <link rel="stylesheet" href="css/components/kpi-dashboard.css">
    <link rel="stylesheet" href="css/components/store-comparison.css">
    <link rel="stylesheet" href="css/components/order-assignment.css">
    <link rel="stylesheet" href="css/components/order-exception.css">
    <link rel="stylesheet" href="css/components/refund-approval.css">
    <link rel="stylesheet" href="css/components/package-config.css">
    <link rel="stylesheet" href="css/components/price-strategy.css">
    <link rel="stylesheet" href="css/components/batch-operations.css">
    <link rel="stylesheet" href="css/components/monitor-dashboard.css">
    <link rel="stylesheet" href="css/components/sales-analysis.css">
    <script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.10/dayjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/antd@5/dist/antd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</head>
<body>
    <div id="root">
        <div class="app-layout">
            <!-- 顶部导航栏 -->
            <header class="header">
                <div class="logo">外卖后台管理系统</div>
                <div class="header-right">
                    <span class="theme-switch">主题切换</span>
                    <span class="user-info">管理员</span>
                </div>
            </header>

            <div class="main-container">
                <!-- 左侧菜单 -->
                <aside class="sidebar">
                    <nav class="menu">
                        <div class="menu-item">
                            <span>多店铺管理</span>
                            <ul class="submenu">
                                <li>门店运营监控</li>
                                <li>KPI指标看板</li>
                                <li>店铺数据对比</li>
                            </ul>
                        </div>
                        <div class="menu-item">
                            <span>订单管理</span>
                            <ul class="submenu">
                                <li>智能订单分配</li>
                                <li class="active">异常订单处理</li>
                                <li>退款审批流程</li>
                            </ul>
                        </div>
                        <div class="menu-item">
                            <span>商品管理</span>
                            <ul class="submenu">
                                <li class="active">套餐配置管理</li>
                                <li>价格策略调整</li>
                                <li>批量操作功能</li>
                            </ul>
                        </div>
                        <div class="menu-item">
                            <span>数据分析</span>
                            <ul class="submenu">
                                <li>实时监控大屏</li>
                                <li class="active">销售分析报表</li>
                            </ul>
                        </div>
                    </nav>
                </aside>

                <!-- 主内容区 -->
                <main class="main-content">
                    <div class="content-wrapper">
                        <div class="order-exception">
                            <div class="exception-header">
                                <h2 class="exception-title">异常订单处理</h2>
                                <div class="exception-filters">
                                    <div class="store-status">
                                        <span class="status-dot status-normal"></span>
                                        <span>系统运行正常</span>
                                    </div>
                                </div>
                            </div>
                            <div class="exception-list"></div>
                        </div>
                        <div class="sales-analysis">
                            <div class="sales-analysis-header">
                                <h2 class="sales-analysis-title">销售分析报表</h2>
                                <div class="sales-analysis-filters">
                                    <select class="time-range-select">
                                        <option value="week">最近7天</option>
                                        <option value="month">最近30天</option>
                                        <option value="quarter">最近90天</option>
                                    </select>
                                    <select class="store-select">
                                        <option value="all">全部门店</option>
                                        <option value="store1">门店1</option>
                                        <option value="store2">门店2</option>
                                    </select>
                                    <button class="export-button">导出报表</button>
                                </div>
                            </div>
                            <div class="sales-analysis-grid">
                                <div class="analysis-card">
                                    <div class="analysis-card-header">
                                        <h3 class="analysis-card-title">销售趋势分析</h3>
                                    </div>
                                    <div id="salesTrendChart" class="analysis-chart"></div>
                                </div>
                                <div class="analysis-card">
                                    <div class="analysis-card-header">
                                        <h3 class="analysis-card-title">商品销售排行</h3>
                                    </div>
                                    <div id="productRankingChart" class="analysis-chart"></div>
                                </div>
                                <div class="analysis-card">
                                    <div class="analysis-card-header">
                                        <h3 class="analysis-card-title">客户消费分析</h3>
                                    </div>
                                    <div id="customerAnalysisChart" class="analysis-chart"></div>
                                </div>
                                <div class="analysis-card">
                                    <div class="analysis-card-header">
                                        <h3 class="analysis-card-title">时段销售分布</h3>
                                    </div>
                                    <div id="timeDistributionChart" class="analysis-chart"></div>
                                </div>
                            </div>
                        </div>
                        <div class="monitor-dashboard" style="display: none;">
                            <div class="monitor-dashboard-container">
                                <div class="dashboard-header">
                                    <h1>实时运营监控</h1>
                                    <div class="refresh-info">数据更新时间：<span class="update-time"></span></div>
                                </div>
                                <div class="dashboard-grid">
                                    <div class="dashboard-card" id="orderStats">
                                        <h3>订单统计</h3>
                                        <div class="stat-content">
                                            <div class="main-stat"></div>
                                            <div class="sub-stats">
                                                <div class="stat-item" data-type="pending"></div>
                                                <div class="stat-item" data-type="processing"></div>
                                                <div class="stat-item" data-type="completed"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="dashboard-card" id="revenueStats">
                                        <h3>营收统计</h3>
                                        <div class="stat-content">
                                            <div class="main-stat"></div>
                                            <div class="trend-chart"></div>
                                        </div>
                                    </div>
                                    <div class="dashboard-card" id="customerStats">
                                        <h3>客流分析</h3>
                                        <div class="stat-content">
                                            <div class="main-stat"></div>
                                            <div class="customer-distribution"></div>
                                        </div>
                                    </div>
                                    <div class="dashboard-card" id="alertPanel">
                                        <h3>异常预警</h3>
                                        <div class="alert-list"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="store-monitor" style="display: none;">
                            <div class="monitor-header">
                                <h2 class="monitor-title">门店运营监控</h2>
                                <div class="monitor-filters">
                                    <div class="store-status">
                                        <span class="status-dot status-normal"></span>
                                        <span>运营状态正常</span>
                                    </div>
                                </div>
                            </div>

                            <div class="kpi-cards">
                                <div class="kpi-card" id="orderCountCard">
                                    <div class="kpi-card-title">今日订单量</div>
                                    <div class="kpi-card-value">0</div>
                                    <div class="kpi-card-trend"></div>
                                </div>
                                <div class="kpi-card" id="revenueCard">
                                    <div class="kpi-card-title">今日营收</div>
                                    <div class="kpi-card-value">¥0</div>
                                    <div class="kpi-card-trend"></div>
                                </div>
                                <div class="kpi-card" id="avgOrderValueCard">
                                    <div class="kpi-card-title">客单价</div>
                                    <div class="kpi-card-value">¥0</div>
                                    <div class="kpi-card-trend"></div>
                                </div>
                                <div class="kpi-card" id="customerSatisfactionCard">
                                    <div class="kpi-card-title">顾客满意度</div>
                                    <div class="kpi-card-value">0</div>
                                    <div class="kpi-card-trend"></div>
                                </div>
                                <div class="kpi-card ranking-card">
                                    <div class="kpi-card-title">门店排名</div>
                                    <div class="store-ranking"></div>
                                </div>
                            </div>

                            <div class="charts-container">
                                <div class="chart-card">
                                    <div id="orderTrendChart" class="chart-container"></div>
                                </div>
                                <div class="chart-card">
                                    <div id="revenueTrendChart" class="chart-container"></div>
                                </div>
                                <div class="chart-card">
                                    <div id="avgOrderValueTrendChart" class="chart-container"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        </div>
    </div>


    <script src="js/modules/order-exception.js" type="module"></script>
    <script src="js/modules/package-config.js" type="module"></script>
    <script src="js/modules/price-strategy.js" type="module"></script>
    <script src="js/app.js" type="module"></script>
    <script src="js/modules/monitor-dashboard.js" type="module"></script>
    <script src="js/modules/sales-analysis.js" type="module"></script>
</body>
</html>